<template>
<!-- 驿站列表 -->
<view>
    <view class="box_14" v-for="(item, index) in storeList" :key="item.id">
        <view class="box_15 flex">
        <view class="box_16">{{ item.name }}</view>
        <view class="box_17">营业中</view>
        </view>

        <view class="box_18">营业时间：{{ item.startWorkTime }}～{{ item.endWorkTime }}</view>

        <view class="box_19">{{ item.address }}</view>

        <view class="box_20 flex flex-align-center flex-justify-around">
        <image src="https://bc-1306761403.cos.ap-shanghai.myqcloud.com/a8114efe-76a4-4988-9891-bff00a11de66.png" mode="" />
        <view class="box_21" :data-phone="item.phone" @tap.stop.prevent="contact">联系店铺</view>
        </view>
        
        <view v-if="item.dist" class="box_22"></view>

        <view v-if="item.dist" class="box_23" @tap.stop.prevent="goOrder" :data-item="item" :data-index="index" :data-id="item.id">
        <image src="@/static/images/24.png" mode="" />
        <view class="box_24">{{ item.dist }}km</view>
        </view>

        <view
        v-if="index == 0 && item.dist"
        class="box_55"
        style="background-image: url(https://bc-1306761403.cos.ap-shanghai.myqcloud.com/9bf5259b-65fb-4c08-95f9-d60a25ec0680.png); background-size: cover"
        ></view>
    </view>


    <!-- <view class="loading-more" v-if="storeLoading && storeList.length > 0">
        <text class="loading-text">正在加载更多...</text>
    </view>


    <view class="no-more" v-if="!storeLoading && storeList.length > 0 && storeTotal <= storeList.length">
        <text class="no-more-text">没有更多数据了</text>
    </view> -->
</view>
</template>

<script>
import { getRecords } from '@/api/index/index.js';
export default {
  data() {
    return {
      storeList: []
    };
  },
  onLoad() {
    this.getRecords();
  },
  methods: {
      //获取门店
    getRecords() {
        getRecords(this.defalutQuery).then((res) => {
            this.setData({
                storeList: res.data.records
            });
            uni.setStorageSync('stroreList', res.data.records[0]);
        });
    },
    //打电话
    contact(e) {
        uni.makePhoneCall({
            phoneNumber: e.currentTarget.dataset.phone
        });
    },
    //跳转地图
    goOrder(e) {
        uni.openLocation({
            latitude: Number(e.currentTarget.dataset.item.latitude),
            // 纬度，浮点数，范围为-90~90，负数表示南纬
            longitude: Number(e.currentTarget.dataset.item.longitude),
            // 经度，浮点数，范围为-180~180，负数表示西经
            scale: 18,
            // 缩放比例，范围1~28，默认为18
            name: e.currentTarget.dataset.item.name,
            // 位置名
            address: e.currentTarget.dataset.item.address,
            // 地址的详细说明
            success: function (res) {
                console.log(res);
            },
            fail: function (err) {
                console.error(err);
            }
        });
    },
  }
};
</script>

<style scoped>
/* 驿站列表样式 */
.box_14 {
  /* width: 690rpx;
  height: 230rpx; */
  background: #ffffff;
  box-shadow: 0rpx 4rpx 30rpx 0rpx rgba(218, 218, 218, 0.5);
  border-radius: 16rpx;
  margin: 0 auto;
  margin-bottom: 24rpx;
  position: relative;
}

.box_15 {
  margin-top: 26rpx;
  margin-left: 40rpx;
}

.box_16 {
  height: 42rpx;
  font-size: 30rpx;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #000000;
  line-height: 42rpx;
}

.box_17 {
  width: 60rpx;
  font-size: 20rpx;
  margin-left: 12rpx;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #0f44a2;
  line-height: 42rpx;
}

.box_18 {
  width: 272rpx;
  height: 34rpx;
  font-size: 24rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #8d96a5;
  line-height: 34rpx;
  margin-left: 40rpx;
  margin-top: 8rpx;
}

.box_19 {
  width: 356rpx;
  height: 34rpx;
  font-size: 24rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #8d96a5;
  line-height: 34rpx;
  margin-left: 40rpx;
  margin-top: 8rpx;
}

.box_20 {
  width: 127rpx;
  height: 42rpx;
  background: linear-gradient(163deg, #ff7935 0%, #fc5f0f 100%);
  border-radius: 6rpx;
  border: 1rpx solid #ff7b3a;
  margin-left: 40rpx;
  margin-top: 18rpx;
}

.box_20 image {
  width: 22rpx;
  height: 18rpx;
}

.box_21 {
  width: 80rpx;
  height: 28rpx;
  font-size: 20rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #ffffff;
  line-height: 28rpx;
}

.box_22 {
  position: absolute;
  height: 148rpx;
  border: 2rpx dashed #eff6ff;
  right: 218rpx;
  top: 50%;
  transform: translate(0, -50%);
}

.box_23 {
  position: absolute;
  right: 78rpx;
  top: 74rpx;
  text-align: center;
}

.box_23 image {
  width: 44rpx;
  height: 44rpx;
}

.box_24 {
  height: 32rpx;
  font-size: 24rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #0f44a2;
  line-height: 32rpx;
}

.box_55 {
  position: absolute;
  right: 0;
  top: 0;
  width: 108rpx;
  height: 46rpx;
}
</style>
